<template>
	<main>
		<el-row>
			<h3>选择客户端</h3>
			<el-form :inline="true">
				<el-form-item label="公司">
					<el-select v-model="currentCompany" placeholder="选择公司" @change="selectCompany" v-loading="loadingCompany">
						<el-option v-for="company in companies" :key="company.id" :label="company.companyName" :value="company.id"></el-option>
					</el-select>
				</el-form-item>

			</el-form>
		</el-row>

		<section>
			<el-row style=";margin-top:20px" v-if="currentCompany">
				<el-col :span="24" align="right">
					<el-button @click.native="addPayment"><icon name="plus"></icon></el-button>
				</el-col>
			</el-row>
			<el-row>
				<el-table :data="payments" style="width: 100%;margin-top:20px;" stripe v-loading="loadingData">
					<el-table-column prop="name" label="名称" width="170"></el-table-column>
					<el-table-column prop="payType" label="类型" width="170"></el-table-column>
					<el-table-column prop="mark" label="备注"></el-table-column>
					<!--<el-table-column label="是否可用" width="100">-->
						<!--<template scope="scope">-->
							<!--<p style="text-align: center">-->
								<!--<icon name="check" v-if="scope.row.isEnable == 1" style="color: darkgreen"></icon>-->
								<!--<icon name="remove" v-else style="color: red;"></icon>-->
							<!--</p>-->
						<!--</template>-->
					<!--</el-table-column>-->
					<el-table-column label="操作" width="70">
						<template slot-scope="scope" >
							<el-button size="small" @click="editPayment(scope.row)">
								<icon name="pencil"></icon>
							</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-row>
		</section>

		<el-dialog v-model="createPaymentDialog" title="新建支付">
			<el-form label-width="120px">
				<el-form-item label="名称">
					<el-input type="text" v-model="newPayment.name"></el-input>
				</el-form-item>
				<el-form-item label="类型">
					<el-select v-model="newPayment.type">
						<el-option v-for="type of paymentTypes" :key="type.id" :value="type.id" :label="type.name"></el-option>
					</el-select>
				</el-form-item>
				<!--<el-form-item label="是否可用">-->
					<!--<el-switch on-text="" off-text="" v-model="newPayment.enabled"></el-switch>-->
				<!--</el-form-item>-->
				<el-form-item label="备注">
					<el-input type="textarea" no-resize v-model="newPayment.mark"></el-input>
				</el-form-item>
				<el-form-item style="text-align: right">
					<el-button type="primary" @click.native="submitNewPayment">保存</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>

		<el-dialog v-model="editPaymentDialog" title="新建支付">
			<el-form label-width="120px">
				<el-form-item label="名称">
					<el-input type="text" v-model="editPaymentData.name"></el-input>
				</el-form-item>
				<el-form-item label="类型">
					<el-select v-model="editPaymentData.type">
						<el-option v-for="type of paymentTypes" :key="type.id" :value="type.id" :label="type.name"></el-option>
					</el-select>
				</el-form-item>
				<!--<el-form-item label="是否可用">-->
					<!--<el-switch on-text="" off-text="" v-model="editPaymentData.enabled"></el-switch>-->
				<!--</el-form-item>-->
				<el-form-item label="备注">
					<el-input type="textarea" no-resize v-model="editPaymentData.mark"></el-input>
				</el-form-item>
				<el-form-item style="text-align: right">
					<el-button type="primary" @click.native="submitEditPayment">保存</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
	</main>
</template>
<script>
	export default {
		name: 'payments-management',
		data(){
			return {
				loadingCompany:false,
				loadingData:false,
				currentCompany:'',
				companies:[],
				payments:[],
				createPaymentDialog:false,
				editPaymentDialog:false,
				newPayment:{},
				editPaymentData:{enabled:false,name:'',type:'',mark:'',id:''},
				paymentTypes:[
					{id:'cod',name:'货到付款'},
					{id:'wxpay',name:'微信付款'},
					{id:'alipay',name:'支付宝付款'},
					{id:'balance',name:'余额付款'},
				],
			}
		},
		methods:{
			submitNewPayment(){
				this.$store.dispatch({type:'fetch',name:'createPayment',data:{
					name: this.newPayment.name,
					payType: this.newPayment.type,
					companyId:this.newPayment.companyId,
					mark:this.newPayment.mark
				}}).then(res=>{
					if(!res.errCode){
						this.selectCompany(this.currentCompany);
						this.resetData();
					}else{
						console.log(res);
						this.$message({type:'error',message:'添加支付失败'});
					}
				}).catch(error=>{
					console.log(error);
					this.$message({type:'error',message:'添加支付失败'});
				})
			},
			submitEditPayment(){
				this.$store.dispatch({type:'fetch',name:'editPayment',data:{
					id: this.editPaymentData.id,
					name: this.editPaymentData.name,
					payType: this.editPaymentData.type,
					mark:this.editPaymentData.mark,
				}}).then(res=>{
					if(!res.errCode){
						this.selectCompany(this.currentCompany);
						this.resetData();
					}else{
						this.$message({type:'error',message:'编辑支付失败'});
					}
				}).catch(error=>{
					console.log(error);
					this.$message({type:'error',message:'编辑支付失败'});
				})
			},
			resetData(){
				this.requestCompanies();
				this.newPayment = {name:'',type:undefined,companyId:this.currentCompany.id,enabled:true,mark:''};
				this.editPaymentData = {id:'',name:'',type:undefined,companyId:this.currentCompany.id,enabled:true,mark:''};
				this.createPaymentDialog = false;
				this.editPaymentDialog = false;
			},
			selectCompany(value){
				this.search(value)
					.then(res=> {
						if(!res.errCode){
							console.log(res);
							this.payments = res;
						}else{
							this.$message({type:'error',message:res.errMsg});
						}
					})
					.catch(error=>{
						console.log(error);
						this.$message({type:'error',message:'查询失败'});
					})
			},
			search(id){
				return new Promise((resolve,reject)=>{
					this.$store.dispatch({type:'fetch',name:'getPaymentByCompany',data:{companyId:id}})
						.then(res=>{
							resolve(res);
						})
						.catch(error=>{
							reject(error);
						})
				});
			},
			addPayment(){
				this.newPayment = {name:'',type:undefined,companyId:this.currentCompany.id,enabled:true,mark:''};
				this.createPaymentDialog = true;
			},
			editPayment(row){
				this.editPaymentData.id = row.id;
				this.editPaymentData.name = row.name;
				this.editPaymentData.type = row.payType;
				this.editPaymentData.mark = row.mark;
				this.editPaymentData.enabled = row.isEnable;
				this.editPaymentDialog = true;
			},
			requestCompanies(){
				this.fetchCompanies().then(res=>{
					this.loadingCompany = false;
					if(!res.errCode){
						this.companies = res;
					}else{
						this.$message({type:'error',message:res.errMsg})
					}
				}).catch(error=>{console.log(error);})
			},
			fetchCompanies(){
				return new Promise((resolve,reject)=>{
					this.loadingCompany = true;
					this.$store.dispatch({
						type:'fetch',
						name:'getCompanyList',
					}).then(res=>{
						resolve(res);
					}).catch(error=>{
						this.loadingCompany = false;
						reject(error);
					})
				});
			},
		},
		created(){
			this.requestCompanies();
		}
	}
</script>
